<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件传递多个值 </title>
</head>

<body>
    <div id="app">
        <b-content></b-content>
    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const vm = Vue.createApp({})
        vm.component('b-content',{
            //使用b-title组件传递内容
            template:
            `
            <div>
                <b-title :name="name" :price="price" :num="num"></b-title>
            </div>
            `,
            data:function(){
                return{
                    name:'苹果',
                    price:'10元',
                    num:2800
                }
            }
        })
        vm.component('b-title',{
            props:['name','price','num'],
            template:
            `<ul><li>{{name}}</li><<li>{{price}}</li><li>{{num}}</li></ul>`

        })
        vm.mount('#app')
    </script>
</body>

</html>
